<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>ToDoList-最简单的待办事项列表</title>
		<style type="text/css">
			body {
				margin: 0px;
				padding: 0px;
				background-color: #cdcdcd;
				font-size: 16px;
			}
			/*header*/
			.header {
				height: 50px;
				background-color: rgba(47,47,47,0.98);
			}
			.headerTop {
				margin:0 auto;
				width: 600px;
				height: 50px;
				/*background: lightcoral;*/
			} 
			label{
				float:left;
				width:100px;
				line-height:50px;
				color:#DDD;
				font-size:24px;
				cursor:pointer;
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
				} 
			.header input {
				float: right;
				width: 360px;
				height: 24px;
				margin-top: 12px;
				text-indent: 1em;
				border: none;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255,255,255,0.24);
				}
			input:focus {
				outline-width:0 ;
			}
			/*center*/
			.center {
				width: 600px;
				height: auto;
				/*background: lightblue;*/
				margin: 0 auto;	
			}
			.center h2 {
				position: relative;
			}
			.center span {
				display: inline-block;
				position: absolute;
				right: 5px;
				top: 2px;
				padding: 0 5px;
				height: 20px;
				line-height: 22px;
				text-align: center;
				border-radius: 20px;
				background-color: #e6e6ea;
				font-size: 14px;
			}	
		/*增删节点*/          /*使用js实现*/
			ol,ul{
				padding:0;
				list-style:none;
			} 
			
			
			/*footer*/ 
			.footer {
				text-align: center;
				color: #666666;
				font-size: 14px;
			}
			.footer a {
				text-decoration:none;
				color:#999;
			}
					
		</style>
	</head>
	<body>
		<div class="header">
			<div class="headerTop">
				<form action="javascript:Action()" method="post" id="form">
					<label for="title">ToDoList</label>
					<input type="text" name="title" id="title" value="" required="required" placeholder="添加ToDo"/>
				</form>
			</div>
		</div>
		<div class="center">
			<h2 onclick="save()">正在进行
			<span id="todocount">0</span>
			</h2>
			<div id="todolist" class="demo-box"></div>
			<h2>已经完成
			<span id="donecount">0</span>
			</h2>
			<div id="donelist"></div>
		</div>
		<div class="footer">
			Copyright © 2014 todolist.cn&nbsp;<a href="javascript:clear();" style="text-decoration: none;color: #999;">clear</a>
		</div>
	</body>
</html>
